<!-- 发约球帖 -->
<template>
  <view class="content">
    <form @submit="formSubmit" @reset="formReset">
      <div> <!-- 球局名称 -->
        <label for="Name"><text>球局名称：</text></label>
        <input id="Name" v-model="e_name" name="name" maxlength="16" placeholder="请输入" />
      </div>
      <div> <!-- 球局时间 -->
        <label for="Time"><text>球局时间：</text></label>
        <input id="Time" v-model="e_time" name="time" maxlength="16" placeholder="请输入" />
      </div>
      <div> <!-- 球局地点 -->
        <label for="Location"><text>球局地点：</text></label>
        <input id="Location" v-model="e_location" name="location" maxlength="16" placeholder="请输入" />
      </div>
      <div> <!-- 球局类型选择器 -->
        <label><text>球局类型：</text></label>
        <picker @change="handlePickerChange" :value="index" :range="kindList" range-key="name">
          <view class="picker">
            {{ kindList[index].name }}
          </view>
        </picker>
      </div>
      <div> <!-- 球局等级选择器 -->
        <label><text>球局等级：</text></label>
        <picker @change="handlePickerChange1" :value="levelIndex" :range="levelList" range-key="name">
          <view class="picker">
            {{ levelList[levelIndex].name }}
          </view>
        </picker>
      </div>
      <div> <!-- 球局人数 -->
        <label for="People"><text>球局人数：</text></label>
        <input id="People" v-model="e_people" name="people" maxlength="16" placeholder="请输入" />
      </div>
      <div> <!-- 联系方式 -->
        <label for="Contact"><text>联系方式：</text></label>
        <input id="Contact" v-model="e_contact" name="contact" maxlength="16" placeholder="请输入" />
      </div>
      <div> <!-- 补充 -->
        <label><text>补充：</text></label>
        <textarea v-model="e_content" name="content" placeholder="补充内容" maxlength="100" cols="100" rows="5"></textarea>
      </div>
      <div>
        <button form-type="submit">发布</button>
        <button type="default" form-type="reset">重置</button>
      </div>
    </form>
  </view>
</template>

<script>
  // 引入请求方法
  import {
    reqPublishAppointBlog
  } from '@/api/post/appointment';

  export default {
    data() {
      return {
        e_name: '',
        e_time: '',
        e_location: '',
        e_people: '',
        e_contact: '',
        e_content: '',
        kindList: [{
            name: "男单",
            id: 1
          },
          {
            name: "男双",
            id: 2
          },
          {
            name: "女单",
            id: 3
          },
          {
            name: "女双",
            id: 4
          },
          {
            name: "混双",
            id: 5
          }
        ],
        index: 0, // 类型筛选器下标
        levelList: [{
            name: "萌新场",
            id: 1
          },
          {
            name: "中阶场",
            id: 2
          },
          {
            name: "高手场",
            id: 3
          }
        ],
        levelIndex: 0 // 等级筛选器下标
      };
    },
    methods: {
      handlePickerChange: function(e) {
        this.index = e.detail.value;
      },
      handlePickerChange1: function(e) {
        this.levelIndex = e.detail.value;
      },

      // 发布帖子
      async formSubmit() {
        var type = this.index; //获取当前选择类型下标
        getApp().globalData.blogType = this.levelIndex; //获取当前选择分区类型下标

        var formData = {
          name: this.e_name,
          time: this.e_time,
          location: this.e_location,
          type,
          people: this.e_people,
          contact: this.e_contact,
          content: this.e_content
        };
        var jsonData = JSON.stringify(formData); //将表单数据转换成json类型数据

        wx.showLoading({
          title: '发布中ing',
          icon: 'loading',
          mask: true,
          duration: 100000,
        });

        let result = await reqPublishAppointBlog(getApp().globalData.blogType, jsonData);

        wx.hideLoading();
        if (result.success) {
          console.log(result.data);
          wx.showToast({
            title: '发布成功',
            icon: 'success',
            mask: true,
            duration: 1500,
            success: function() {
              //弹窗后执行，可以省略
              setTimeout(() => {
                wx.navigateBack()
              }, 1500);
            }
          });
        } else {
          wx.showToast({
            title: '发布失败',
            icon: 'error',
            mask: true,
            duration: 1500,
          });
        }
      },

      formReset: function(e) {
        console.log('清空数据')
      },
    }
  }
</script>

<style>
  page {
    height: 100vh;
    width: 100vw;
  }

  .back_button {
    position: absolute;
    border: none !important;
    border-color: transparent;
    right: 0%;
    top: 0%;
  }

  input,
  picker {
    display: inline-block;
    vertical-align: middle;
    z-index: 9999;
    /* 最上层 */
    width: 200px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #acacac;
    border-radius: 4px;
    text-align: center;
    background-color: #ffffff;
    margin-bottom: 10px;
    margin-left: 5px;
  }

  label {
    border: 1px solid #acacac;
    border-radius: 4px;
    background-color: #ffffff;
    height: 30px;
    width: 80px;
    text-align: center;
  }

  textarea {
    border: 1px solid #acacac;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    background-color: #ffffff;
  }

  button {
    background-color: #00aa00;
    color: white;
    padding: 5px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 220px;
    /* 设置按钮宽度 */
    height: 55px;
    /* 设置按钮高度 */
    margin-top: 10px;
  }

  .content {
    background-image: url();
    /* 图片素材background_2.jpg */
    background-size: cover;
    height: 100vh;
    width: 100vw;

    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 设置从上往下布局 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
  }
</style>